<script lang="ts" setup>
const props = defineProps<{
  id: string
  label: string
  value: boolean
  disabled: boolean
  singleSelect: boolean
  selected: string[]
}>()

const emits = defineEmits(['update:value', 'button-state', 'selected-items'])

const isChecked = props.value
const isDisabled = props.disabled
function handleChange() {
  if (props.singleSelect) {
    emits('update:value', isChecked)
    emits('button-state', isChecked)
  } else {
    emits('update:value', isChecked)
    emits('selected-items', getSelectedItems())
    emits('button-state', isChecked)
  }
}

function getSelectedItems() {
  return props.selected
}
</script>

<template>
  <div class="flex space-x-2">
    <input
      :id="props.id"
      type="checkbox"
      class="checkbox disabled:cursor-not-allowed disabled:opacity-50"
      v-model="isChecked"
      :disabled="isDisabled"
      @change="handleChange"
    />
    <label class="label" :for="props.id">
      {{ label }}
    </label>
  </div>
</template>

<style scoped>
.checkbox:disabled + .label {
  @apply opacity-50 cursor-not-allowed;
}
</style>
